<template>
	<view class="warp">
		<view class="header_box">
			<view class="saoyisao">扫一扫</view>
			<view class="saoma" @click="scan">
				
				<image class="icon" src="/static/images/saoma_icon1.png" mode=""></image>
			</view>
			<view class="header" @click="geren()">
				<view class="l_img">
					<image class="img" :src="userinfo.userAvatar" mode=""></image>
				</view>
				<view class="r_box">
					<view class="name_box">
						<view class="name">{{userinfo.userNickname}}</view>
						<!-- <view class="dengji">{{userinfo.userRealname}}</view> -->
					</view>
					<view class="tel">{{userinfo.userPhone}}</view>
					<view class="tel" style="display: flex;">
						{{userinfo.userLevelTitle}}
					</view>
					
				</view>
				<view style="width:24rpx;height:40rpx;margin: auto;">
					<image style="width:100%;height:100%;" class="icon" src="/static/images/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view v-show="userinfo.advnum>0 && jiange==true">
			<ad-rewarded-video adpid="1321055173" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
				<button :disabled="loading" class="guanggao" >显示广告(剩余次数：{{userinfo.advnum}})</button>
				<view v-if="error">{{error}}</view>
			</ad-rewarded-video>
		</view>
		<view class="qianbao_bg">
			<view class="qianbao_box">
				
				<view class="qianbao">
					<navigator url="/pages/yongjin/yongjin?type=1" class="lists link">
						<image class="icon" src="/static/images/qianbao_icon2.jpg" mode=""></image>
						<view class="name">余额</view>
						<view class="money">{{userinfo.userBalance}}</view>
					</navigator>
					<navigator url="/pages/yongjin/yongjin?type=2" class="lists">
						<image class="icon" src="/static/images/qianbao_icon2.jpg" mode=""></image>
						<view class="name">贡献值</view>
						<view class="money">{{userinfo.userQuan}}</view>
					</navigator>
				</view>
				<view class="qianbao">
					<navigator url="/pages/yongjin/yongjin?type=3" class="lists">
						<image class="icon" src="/static/images/qianbao_icon2.jpg" mode=""></image>
						<view class="name">积分</view>
						<view class="money">{{userinfo.userCoin}}</view>
					</navigator>
					<navigator url="/pages/yongjin/yongjin?type=4" class="lists link">
						<image class="icon" src="/static/images/qianbao_icon2.jpg" mode=""></image>
						<view class="name">补贴</view>
						<view class="money">{{userinfo.userGiveMoney}}</view>
					</navigator>
				</view>
				<view class="dingdan_box">
					<navigator url="/pages/wodedingdan/wodedingdan?type=1" class="list">
						<image class="icon" src="/static/images/dingdan_icon1.png" mode="heightFix"></image>
						<view class="text">待付款</view>
					</navigator>
					<navigator url="/pages/wodedingdan/wodedingdan?type=2" class="list">
						<image class="icon" src="/static/images/dingdan_icon2.png" mode="heightFix"></image>
						<view class="text">待发货</view>
					</navigator>
					<navigator url="/pages/wodedingdan/wodedingdan?type=3" class="list">
						<image class="icon" src="/static/images/dingdan_icon3.png" mode="heightFix"></image>
						<view class="text">已发货</view>
					</navigator>
					<navigator url="/pages/wodedingdan/wodedingdan?type=4" class="list">
						<image class="icon" src="/static/images/dingdan_icon4.png" mode="heightFix"></image>
						<view class="text">已完成</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="nav_bg">
			<view class="nav_box">
				<navigator url="/pages/shopInfo/shopInfo" class="list" v-show="userinfo.userLevel>0">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon3.png" mode="widthFix"></image>
						<view class="text">本地生活</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/select_address/select_address" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon6.png" mode="widthFix"></image>
						<view class="text">地址管理</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/fensi/fensi" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon4.png" mode="widthFix"></image>
						<view class="text">粉丝团</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/bankcard/bankcard" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon2.png" mode="widthFix"></image>
						<view class="text">银行卡</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/zitiorder/zitiorder?type=-1" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon7.png" mode="widthFix"></image>
						<view class="text">自提订单</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
			</view>
			<view class="nav_box">
				<navigator url="/pages/wodedingdan/wodedingdan?type=-1&from=sp" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon7.png" mode="widthFix"></image>
						<view class="text">本地生活订单(快递)</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/zitiorder/zitiorder?type=-1&from=sp" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon7.png" mode="widthFix"></image>
						<view class="text">本地生活订单(自提)</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
			</view>
			<view class="nav_box">
				<navigator url="/pages/yinsixieyi/yinsixieyi" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon6.png" mode="widthFix"></image>
						<view class="text">用户协议和隐私政策</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/kefu/kefu" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon7.png" mode="widthFix"></image>
						<view class="text">联系客服</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/hetong/hetong" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon1.png" mode="widthFix"></image>
						<view class="text">关于我们</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/erjipass/erjipass" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon4.png" mode="widthFix"></image>
						<view class="text">修改支付密码</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/shopShenQing/shopShenQing" class="list" v-if="userinfo.userLevel>0 && userinfo.isCon == 1 && userinfo.areaId == 0">
					<view class="l_box">
						<image class="icon" src="/static/img/10.png" mode="widthFix"></image>
						<view class="text">体验店申请</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<navigator url="/pages/areaPartner/areaPartner" class="list" v-if="userinfo.userLevel>0 && userinfo.isCon == 1 && userinfo.shopId == 0">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon3.png" mode="widthFix"></image>
						<view class="text">区代理申请</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</navigator>
				<view @click="logout" class="list">
					<view class="l_box">
						<image class="icon" src="/static/images/wode_nav_icon8.png" mode="widthFix"></image>
						<view class="text">退出</view>
					</view>
					<image class="r_icon" src="/static/images/jiantou_you_icon1.jpg" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				userinfo:'',
				loading:false,
				error:'',
				jiange:true
			}
		},
		onLoad() {
			this.userinfo=uni.getStorageSync('user');
			//this.loadAd();
			
		},
		onShow(){
			uni.setNavigationBarTitle({
			    title: '我的'
			});
			this.updateuserinfo();
		},
		methods:{
			onadload(e) {
				if(this.userinfo.advnum<=0){
					uni.showToast({
						title:'今日次数已用完',
						icon:'none'
					})
					this.loading=false;
				}else{
					this.loading=true;
				}
				return;
				
				console.log('广告数据加载成功');
			},
			onadclose(e) {
			  var that=this;
			  that.jiange = false;
			  var num = 7;
			  var	t = setInterval(play, 1000);
			  function play(){
				num--;
				if(num == 0){
					clearInterval(t);
					that.jiange = true;
				}
			  }
			  const detail = e.detail
			  // 用户点击了【关闭广告】按钮
			  if (detail && detail.isEnded) {
				// 正常播放结束
				console.log("onadclose " + detail.isEnded);
				this.$http.get('user/addAdvCoin',{}).
				then(function (response) {
					uni.showToast({
						title:'观看完成',
						icon:'none'
					})
					that.updateuserinfo();
					if(that.userinfo.advnum<=0){
						that.loading=false;
					}
				}).catch(function (error) {
					console.log(error);
				});
			  } else {
				// 播放中途退出
				console.log("onadclose " + detail.isEnded);
			  }
			  this.loading=false;
			},
			onaderror(e) {
				this.loading=false;
			  // 广告加载失败
			  console.log("onaderror: ", e.detail);
			},
			geren(){
				uni.navigateTo({
					url:'/pages/gerenziliao/gerenziliao'
				})
			},
			scan(){
				var that=this;
				// 允许从相机和相册扫码
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						var data=res.result.split('=');
						if(data[0]=='shopId'){
							uni.navigateTo({
								url:'/pages/mallShopGood/mallShopGood?typeid=0&id='+data[1]
							})
						}else{
							uni.showToast({
								title:'非法访问',
								icon:'none'
							})
							return;
						}
				    }
				});
			},
			market(){
				var alipay=this.userinfo.user_paycode;
				if(alipay==''||alipay==null||alipay==undefined){
					uni.showToast({
						title:'请先去个人资料完善支付宝账号',
						icon:'none'
					})
					return;
				}
				uni.navigateTo({
					url:'/pages/market/market'
				})
			},
			mymarket(){
				var alipay=this.userinfo.user_paycode;
				if(alipay==''||alipay==null||alipay==undefined){
					uni.showToast({
						title:'请先去个人资料完善支付宝账号',
						icon:'none'
					})
					return;
				}
				uni.navigateTo({
					url:'/pages/mymarket/mymarket'
				})
			},
			updateuserinfo(){
				var that=this;
				this.$http.get('user/getUserInfo',{}).
				then(function (response) {
					uni.setStorageSync('user',response.data);
					that.userinfo=response.data;
				}).catch(function (error) {
					console.log(error);
				});
			},
			
			logout(){
				uni.showModal({
					title:'确定退出吗',
					success(res) {
						if(res.confirm){
							uni.clearStorageSync();
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					}
				})
			}
		}
	}
</script>
<style>
	page{
		background: #e2e5e8;
	}
</style>
<style scoped lang="scss">
	.guanggao{
		width:80%;
		height:100rpx;
		line-height: 100rpx;
		background: #284179;
		color: #fff;
		text-align: center;
		margin:80rpx auto;
		border-radius: 20rpx;
	}
	.header_box{
		height: 360rpx;
		background: linear-gradient(to right, #284179 0%, #64add9 100%);
		padding-top: 140rpx;
		box-sizing: border-box;
		position: relative;
		.saoyisao{
			width: 120rpx;
			height: 70rpx;
			position: absolute;
			top: 110rpx;
			right: -10rpx;
		}
		.saoma{
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 40rpx;
			right: 30rpx;
			.icon{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.header{
			height: 180rpx;
			padding: 0 30rpx;
			display: flex;
			.l_img{
				width: 120rpx;
				height: 120rpx;
				background: #fff;
				border-radius: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.img{
					display: block;
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;
				}
			}
			.r_box{
				flex: 1;
				overflow: hidden;
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.name_box{
					display: flex;
					height: 50rpx;
					align-items: center;
					.name{
						font-size: 32rpx;
						color: #fff;
						line-height: 50rpx;
						font-weight: bold;
					}
					.dengji{
						width: 180rpx;
						height:40rpx;
						border-radius: 5px;
						text-align: center;
						line-height: 40rpx;
						border: 1px solid #fff;
						background: #284179;
						font-size: 28rpx;
						color: #fff;
						margin-left: 60rpx;
					}
				}
				.tel{
					font-size: 26rpx;
					color: #fff;
					line-height: 40rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
	.qianbao_bg{
		position: relative;
		margin-top: 80rpx;
		padding: 0 30rpx;
		.qianbao_box{
			width: 100%;
			background: #fff;
			border-radius: 30rpx;
			.qianbao{
				height: 100rpx;
				border-bottom: 1px solid #e2e5e8;
				display: flex;
				justify-content: space-between;
				.lists{
					width: 50%;
					height: 100%;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					box-sizing: border-box;
					&.link{
						position: relative;
						&::after{
							content: "";
							position: absolute;
							width: 1px;
							height: 80rpx;
							background: #d6dadd;
							top: 50%;
							transform: translateY(-50%);
							right: 0;
						}
					}
					.icon{
						display: block;
						width: 48rpx;
						height: 48rpx;
					}
					.name{
						font-size: 26rpx;
						color: #7d7b7b;
						margin-left: 20rpx;
					}
					.money{
						font-size: 26rpx;
						color: #030304;
						margin-left: 20rpx;
					}
					.btn{
						width: 150rpx;
						height: 60rpx;
						background: #284179;
						text-align: center;
						line-height: 60rpx;
						border-radius: 30rpx;
						box-shadow: 0 1px 5px 3px #dcdcdc;
						font-size: 34rpx;
						color: #fff;
					}
				}
			}
			.dingdan_box{
				margin-top: 20rpx;
				padding: 20rpx 0 20rpx;
				display: flex;
				.list{
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					.icon{
						display: block;
						height: 56rpx;
						height: 56rpx;
					}
					.text{
						font-size: 26rpx;
						color: #7d7b7b;
						font-size: 30rpx;
						margin-top: 20rpx;
						line-height: 50rpx;
					}
				}
			}
		}
	}
	.nav_bg{
		padding: 0 30rpx 50rpx;
		margin-top: 30rpx;
		.nav_box{
			width: 100%;
			border-radius: 30rpx;
			background: #fff;
			margin-bottom: 30rpx;
			.list{
				height: 90rpx;
				border-bottom: 1px solid #e2e5e8;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				.l_box{
					display: flex;
					flex: 1;
					overflow: hidden;
					align-items: center;
					.icon{
						display: block;
						width: 40rpx;
					}
					.text{
						font-size: 30rpx;
						color: #636262;
						margin-left: 20rpx;
					}
				}
				.r_icon{
					display: block;
					width: 20rpx;
					height: 44rpx;
				}
			}
		}
	}
</style>
